<template>
	<view class="container">
		<view class="page-body">
			<view class="wrapper">
				<view class="toolbar" @tap="format">
					<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
					<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
					<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
					<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
					<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align" data-value="left"></view>
					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align" data-value="center"></view>
					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align" data-value="right"></view>
					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align" data-value="justify"></view>
					<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight" data-value="2"></view>
					<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing" data-value="2em"></view>
					<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop" data-value="20px"></view>
					<view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px"></view>
					<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
					<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view>
					<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize" data-value="24px"></view>

					<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color" data-value="#0000ff"></view>
					<view
						:class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
						class="iconfont icon-fontbgcolor"
						data-name="backgroundColor"
						data-value="#00ff00"
					></view>

					<view class="iconfont icon-date" @tap="insertDate"></view>
					<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered"></view>
					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
					<view class="iconfont icon-undo" @tap="undo"></view>
					<view class="iconfont icon-redo" @tap="redo"></view>

					<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
					<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
					<view class="iconfont icon-charutupian" @tap="photo_fn"></view>
					<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
					<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
					<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
					<view class="iconfont icon-shanchu" @tap="clear"></view>
					<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction" data-value="rtl"></view>
				</view>

				<editor
					id="editor"
					class="ql-container"
					placeholder="开始输入..."
					showImgSize
					showImgToolbar
					showImgResize
					@statuschange="onStatusChange"
					:read-only="readOnly"
					@ready="onEditorReady"
					@blur="editblur"
					v-model="editors"
				></editor>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flag:true,//确认是否传输数据
			readOnly: false,
			formats: {},
			editors: '' ,//输入数据
			token:'',
		};
	},
	methods: {
		readOnlyChange() {
			this.readOnly = !this.readOnly;
		},
		onEditorReady() {
			uni.createSelectorQuery()
				.select('#editor')
				.context(res => {
					this.editorCtx = res.context;
				})
				.exec();
		},
		undo() {
			this.editorCtx.undo();
		},
		redo() {
			this.editorCtx.redo();
		},
		format(e) {
			let { name, value } = e.target.dataset;
			if (!name) return;
			// console.log('format', name, value)
			this.editorCtx.format(name, value);
		},
		onStatusChange(e) {
			const formats = e.detail;
			this.formats = formats;
		},
		insertDivider() {
			this.editorCtx.insertDivider({
				success: function() {
					console.log('insert divider success');
				}
			});
		},
		clear() {
			this.editorCtx.clear({
				success: function(res) {
					console.log('clear success');
				}
			});
		},
		removeFormat() {
			this.editorCtx.removeFormat();
		},
		insertDate() {
			const date = new Date();
			const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
			this.editorCtx.insertText({
				text: formatDate
			});
		},
		photo_fn() {
			let _self = this;
			this.flag=false;
			uni.chooseImage({
			    count: 6, //默认9
			    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album'], //从相册选择
			    success: function (res) {
					let imgFiles = res.tempFilePaths[0];
					 console.log(res.tempFilePaths[0]);
					var uper = uni.uploadFile({
					      // 需要上传的地址
					      url:'http://192.168.1.88:20005/public/plugin/business/api_index/upload',
					      // filePath  需要上传的文件
				          filePath: imgFiles,
		                  name: 'file', //文件对应的key
						  formData: {
							  proof: uni.getStorageSync('token')							  
						  },
					      success(res1) {
						      // 显示上传信息
					          let return_data = JSON.parse(res1.data);
							  console.log(return_data);
							/*  let image = {
								  id : return_data.data.id,
								  fileurl : return_data.data.fileurl
							  };
							  _self.images.push(image);
							  _self.img_shows = false; */
							 /*  let return_data2 = JSON.parse(res1.fileurl); */
							  _self.editorCtx.insertImage({
							  	src: return_data.data.fileurl,
							  	alt: '图像',
							  	success: function() {
									_self.flag=true;
							  		console.log('insert image success')
							  	}
							  })
					      }
				    });
			        // onProgressUpdate 上传对象更新的方法
					uper.onProgressUpdate(function(res){
				          // 进度条等于 上传到的进度
				          _self.percent = res.progress
					      console.log('上传进度' + res.progress)
		                  console.log('已经上传的数据长度' + res.totalBytesSent)
				          console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
				    })
			    }
			});
		},
		insertImage() {
			
			/* uni.chooseImage({
				count: 1,
				success: (res) => {
					this.editorCtx.insertImage({
						src: res.tempFilePaths[0],
						alt: '图像',
						success: function() {
							console.log('insert image success')
						}
					})
				}
			})
			 */
			
			
			let that=this;
			this.flag=false;
			uni.chooseImage({
				count: 1,
				success: (res) => {
					console.log(res.tempFiles[0]);
					console.log(res.tempFilePaths[0]);
					uni.saveFile({
						 tempFilePath: res.tempFilePaths[0],
						 success:function(res){
							console.log(res);
							that.http
								.sendRequest('/public/plugin/business/api_index/upload', {
									proof:this.token,
									file:res.savedFilePath
								}).then((res)=>{
									console.log(res);
								})
							
							
						 },
					})
					
				/* 	that.http
								.sendRequest('/public/plugin/business/api_index/upload', {
									proof:this.token,
									file:res.tempFilePaths
								}).then((res)=>{
									console.log(res);
								}) */
				}
			});
		},
		//#ifdef APP-PLUS
		//#endif
		//富文本失去焦点
		editblur() {
			if(flag){
			console.log(this.editors);
			let data = this.editors.detail.html;
			console.log(data);
			this.$emit('blurcontent', data);}
		}
	},
	onLoad() {
		uni.loadFontFace({
			family: 'Pacifico',
			source: 'url("https://sungd.github.io/Pacifico.ttf")'
		});
	},
	onShow() {
		let header = {
			//请求头
			'content-type': 'application/x-www-form-urlencoded'
		};
		console.log('onshow');

		/*  */
		this.http
			.sendRequest('/public/plugin/member_login/api_index/login', {
				type: 'user',
				appid: '76c8ec5451fc20e905f4cbbc61f8fb8e',
				key: '3ae25c65f44df2f0f60f6cbc1fd0a619',
				data: {
					user_login: 'admin',
					user_pass: '6xq6xq6xq'
				}
			})
			.then(res => {
				let token = res.data.data.token;
				let refresh_token = res.data.data.refresh_token;
				uni.setStorageSync('token', token);
				this.token=uni.getStorageSync('token');
			});
	}
};
</script>

<style>
@import './editor-icon.css';

.wrapper {
	padding: 5px;
}

.iconfont {
	display: inline-block;
	padding: 8px 8px;
	width: 24px;
	height: 24px;
	cursor: pointer;
	font-size: 20px;
}

.toolbar {
	box-sizing: border-box;
	border-bottom: 0;
	font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.ql-container {
	box-sizing: border-box;
	padding: 12px 15px;
	width: 100%;
	min-height: 30vh;
	height: auto;
	background: #fff;
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.5;
}

.ql-active {
	color: #06c;
}
</style>
